<!--案件受理弹窗-->
<template>
  <el-dialog append-to-body title="案件受理" width="45%" :visible="visible" @close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-suffix="：" class="white-card" label-width="120px">
      <el-form-item label="受理备注" prop="comment">
        <el-input v-model="form.comment" show-word-limit maxlength="100" placeholder="请输入详细描述" type="textarea" :autosize="{ minRows: 4 }"></el-input>
      </el-form-item>
      <el-form-item label="受理通知书" prop="receiveAttachments">
        <upload-input limitNum="1" :file-list="form.receiveAttachments" :tipsText="'* 支持图片、文档、压缩包格式文件，文件大小不大于 100M'"></upload-input>
      </el-form-item>
    </el-form>

    <div class="dialog-footer-btn">
      <el-button @click="handleClose" type="primary" plain>关闭</el-button>
      <el-button @click="handleSubmit" :loading="submitting" type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as workOrderApi from "@/api/workOrder/index";
import uploadInput from "@/components/uploadInput/uploadInput.vue";
import * as mixins from "@/utils/mixins";
export default {
  name: "acceptDialog",
  props: ["visible", "workOrderNo"],
  mixins: [mixins.loading, mixins.form, mixins.dialog],
  components: {
    uploadInput,
  },
  data() {
    return {
      form: {
        comment: "",
        receiveAttachments: [],
      },
      rules: {
        comment: [{ required: true, message: "请输入" }],
        receiveAttachments: [{ required: true, message: "请上传" }],
      },
      submitting: false,
    };
  },
  methods: {
    handleSubmit() {
      this.validateAndConfirm("form", "确定要受理该案件么？")
        .then(() => {
          this.submitting = true;
          return workOrderApi.distribute.receive({
            ...this.form,
            workOrderNo: this.workOrderNo,
          });
        })
        .then(() => {
          this.$emit("success");
          this.handleClose();
        })
        .finally(() => (this.submitting = false));
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style scoped></style>
